<template>
  <view class="flex-col page">
    <view class="flex-col justify-start items-end image-wrapper">
      <!-- <image
        class="image"
        src="http://ts.ysgzt.cn/static/images/wechat/resources/e5d307e788484f3c95fbe7d2360ff36a.png"
      /> -->
    </view>
    <view class="mt-10 flex-col group">
      <view class="flex-col justify-start items-center text-wrapper">
        <text class="font text">重点城市投放量监测</text>
      </view>

    </view>

    <!-- 这里来写调取数据 -->
    <view class=" flex-col section_2_new">
      <view class="flex-col self-stretch group_2">
        <view class="flex-row justify-between group_3">
          <view class="flex-col items-center col_1">
            重点城市
          </view>
          <view class="flex-col items-center col_1">
            档位
          </view>
          <view class="flex-col items-center col_1">
            投放金额
          </view>
          <view class="flex-col items-center col_1">
            上期对比
          </view>
          <view class="flex-col items-center col_1">
            备注
          </view>

        </view>
        <view class="flex-row justify-between group_3" v-for="(item, index) in list">
          <view class="flex-col items-center col_4">
            {{ item.cityCategory.name }}
          </view>
          <view class="flex-col items-center col_4" @click="click_yan(index)">
            {{ item.number }}
          </view>
          <view class="flex-col items-center col_4" @click="click_yan(index)">
            {{ item.tf_money }}
          </view>
          <view class="flex-col items-center col_4">
            {{ item.sq_con }}
          </view>
          <view class="flex-col items-center col_4">
            {{ item.remark }}
          </view>

        </view>

      </view>

    </view>


  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      list: [],
    };
  },
  onShow() {
    this.getlist()
  },
  methods: {
    getlist() {
      this.$api.sendRequest({
        url: '/api/index/getToufanglist',
        data: {
          page: 1,
          page_size: 1
        },
        success: res => {
          //console.log(res.data)
          if (res.code == 1) {
            this.list = res.data.data
            console.log(this.list)

          }
        }
      });
    }
  },
};
</script>

<style scoped lang="scss">
.page {
  padding-bottom: 216rpx;
  background-color: #00000000;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .image-wrapper {
    padding: 0 0 20rpx;
    background-color: #ffffff;

    .image {
      margin-right: 10rpx;
      width: 674rpx;
      height: 141rpx;
    }
  }

  .group {
    padding: 0 13rpx;

    .text-wrapper {
      padding: 16rpx 0;
      background-color: #00806b;
      border-left: solid 1rpx #eeeeee;
      border-right: solid 1rpx #eeeeee;
      border-top: solid 1rpx #eeeeee;
      border-bottom: solid 1rpx #eeeeee;
    }

    .group_2 {
      padding-bottom: 112rpx;

      .text-wrapper_2 {
        padding: 16rpx 0;
        background-color: #00806b;
        width: 139rpx;
        border-left: solid 1rpx #eeeeee;
        border-right: solid 1rpx #eeeeee;
        border-top: solid 1rpx #eeeeee;
        border-bottom: solid 1rpx #eeeeee;
      }

      .text-wrapper_3 {
        padding: 18rpx 0;
        background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/8ec97932f040ef8bc2edbc1f22259511.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        min-width: 122rpx;
      }

      .pos {
        position: absolute;
        left: 138rpx;
        top: 0;
      }

      .text-wrapper_4 {
        padding: 16rpx 0;
        background-color: #00806b;
        width: 111rpx;
        border-left: solid 1rpx #eeeeee;
        border-right: solid 1rpx #eeeeee;
        border-top: solid 1rpx #eeeeee;
        border-bottom: solid 1rpx #eeeeee;
      }

      .pos_2 {
        position: absolute;
        left: 237rpx;
        top: 0;
      }

      .pos_3 {
        position: absolute;
        right: 239rpx;
        top: 0;
      }

      .pos_4 {
        position: absolute;
        right: 101rpx;
        top: 0;
      }

      .text-wrapper_5 {
        padding: 16rpx 0;
        background-color: #00806b;
        width: 101rpx;
        border-left: solid 1rpx #eeeeee;
        border-right: solid 1rpx #eeeeee;
        border-top: solid 1rpx #eeeeee;
        border-bottom: solid 1rpx #eeeeee;
      }

      .pos_5 {
        position: absolute;
        right: 0;
        top: 0;
      }

      .pos_6 {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      .pos_7 {
        position: absolute;
        left: 138rpx;
        top: 50%;
        transform: translateY(-50%);
      }

      .pos_8 {
        position: absolute;
        left: 237rpx;
        top: 50%;
        transform: translateY(-50%);
      }

      .pos_9 {
        position: absolute;
        right: 239rpx;
        top: 50%;
        transform: translateY(-50%);
      }

      .pos_10 {
        position: absolute;
        right: 101rpx;
        top: 50%;
        transform: translateY(-50%);
      }

      .pos_11 {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      .pos_12 {
        position: absolute;
        left: 0;
        top: 112rpx;
      }

      .pos_13 {
        position: absolute;
        left: 138rpx;
        bottom: 0;
      }

      .pos_14 {
        position: absolute;
        left: 237rpx;
        top: 112rpx;
      }

      .pos_15 {
        position: absolute;
        right: 239rpx;
        top: 112rpx;
      }

      .pos_16 {
        position: absolute;
        right: 101rpx;
        top: 112rpx;
      }

      .pos_17 {
        position: absolute;
        right: 0;
        top: 112rpx;
      }
    }

    .font {
      font-size: 24rpx;
      font-family: PingFangSC;
      line-height: 23rpx;
      color: #ffffff;
    }

    .text {
      text-transform: uppercase;
    }

    .group_3 {
      padding-bottom: 56rpx;

      .pos_18 {
        position: absolute;
        left: 138rpx;
        top: 0;
      }

      .pos_19 {
        position: absolute;
        left: 237rpx;
        top: 0;
      }

      .pos_20 {
        position: absolute;
        right: 239rpx;
        top: 0;
      }

      .pos_21 {
        position: absolute;
        right: 101rpx;
        top: 0;
      }

      .pos_22 {
        position: absolute;
        right: 0;
        top: 0;
      }

      .pos_23 {
        position: absolute;
        left: 0;
        top: 56rpx;
      }

      .pos_24 {
        position: absolute;
        left: 138rpx;
        bottom: 0;
      }

      .pos_25 {
        position: absolute;
        left: 237rpx;
        top: 56rpx;
      }

      .pos_26 {
        position: absolute;
        right: 239rpx;
        top: 56rpx;
      }

      .pos_27 {
        position: absolute;
        right: 101rpx;
        top: 56rpx;
      }

      .pos_28 {
        position: absolute;
        right: 0;
        top: 56rpx;
      }

      .pos_29 {
        position: absolute;
        left: 138rpx;
        top: 0;
      }

      .pos_30 {
        position: absolute;
        left: 237rpx;
        top: 0;
      }

      .pos_31 {
        position: absolute;
        right: 239rpx;
        top: 0;
      }

      .pos_32 {
        position: absolute;
        right: 101rpx;
        top: 0;
      }

      .pos_33 {
        position: absolute;
        right: 0;
        top: 0;
      }

      .pos_34 {
        position: absolute;
        left: 0;
        top: 56rpx;
      }

      .pos_35 {
        position: absolute;
        left: 138rpx;
        bottom: 0;
      }

      .pos_36 {
        position: absolute;
        left: 237rpx;
        top: 56rpx;
      }

      .pos_37 {
        position: absolute;
        right: 239rpx;
        top: 56rpx;
      }

      .pos_38 {
        position: absolute;
        right: 101rpx;
        top: 56rpx;
      }

      .pos_39 {
        position: absolute;
        right: 0;
        top: 56rpx;
      }

      .pos_63 {
        position: absolute;
        left: 138rpx;
        top: 0;
      }

      .pos_64 {
        position: absolute;
        left: 237rpx;
        top: 0;
      }

      .pos_65 {
        position: absolute;
        right: 239rpx;
        top: 0;
      }

      .pos_66 {
        position: absolute;
        right: 101rpx;
        top: 0;
      }

      .pos_67 {
        position: absolute;
        right: 0;
        top: 0;
      }

      .pos_68 {
        position: absolute;
        left: 0;
        top: 56rpx;
      }

      .pos_69 {
        position: absolute;
        left: 138rpx;
        bottom: 0;
      }

      .pos_70 {
        position: absolute;
        left: 237rpx;
        top: 56rpx;
      }

      .pos_71 {
        position: absolute;
        right: 239rpx;
        top: 56rpx;
      }

      .pos_72 {
        position: absolute;
        right: 101rpx;
        top: 56rpx;
      }

      .pos_73 {
        position: absolute;
        right: 0;
        top: 56rpx;
      }
    }

    .text-wrapper_6 {
      padding: 16rpx 0;
      background-color: #ffffff;
      min-width: 100rpx;
      border-left: solid 1rpx #eeeeee;
      border-right: solid 1rpx #eeeeee;
      border-top: solid 1rpx #eeeeee;
      border-bottom: solid 1rpx #eeeeee;
    }

    .image_2 {
      width: 101rpx;
      height: 58rpx;
    }

    .section {
      background-color: #ffffff;
      width: 111rpx;
      height: 58rpx;
      border-left: solid 1rpx #eeeeee;
      border-right: solid 1rpx #eeeeee;
      border-top: solid 1rpx #eeeeee;
      border-bottom: solid 1rpx #eeeeee;
    }

    .section_2 {
      background-color: #ffffff;
      width: 139rpx;
      height: 58rpx;
      border-left: solid 1rpx #eeeeee;
      border-right: solid 1rpx #eeeeee;
      border-top: solid 1rpx #eeeeee;
      border-bottom: solid 1rpx #eeeeee;
    }

    .section_3 {
      background-color: #ffffff;
      width: 101rpx;
      height: 58rpx;
      border-left: solid 1rpx #eeeeee;
      border-right: solid 1rpx #eeeeee;
      border-top: solid 1rpx #eeeeee;
      border-bottom: solid 1rpx #eeeeee;
    }

    .group_4 {
      padding-bottom: 169rpx;

      .pos_40 {
        position: absolute;
        left: 138rpx;
        top: 0;
      }

      .pos_41 {
        position: absolute;
        left: 237rpx;
        top: 0;
      }

      .pos_42 {
        position: absolute;
        right: 239rpx;
        top: 0;
      }

      .pos_43 {
        position: absolute;
        right: 101rpx;
        top: 0;
      }

      .pos_44 {
        position: absolute;
        right: 0;
        top: 0;
      }

      .pos_45 {
        position: absolute;
        left: 0;
        top: 56rpx;
      }

      .pos_46 {
        position: absolute;
        left: 138rpx;
        top: 56rpx;
      }

      .pos_47 {
        position: absolute;
        left: 237rpx;
        top: 56rpx;
      }

      .pos_48 {
        position: absolute;
        right: 239rpx;
        top: 56rpx;
      }

      .pos_49 {
        position: absolute;
        right: 101rpx;
        top: 56rpx;
      }

      .pos_50 {
        position: absolute;
        right: 0;
        top: 56rpx;
      }

      .pos_51 {
        position: absolute;
        left: 0;
        top: 113rpx;
      }

      .pos_52 {
        position: absolute;
        left: 138rpx;
        bottom: 56rpx;
      }

      .pos_53 {
        position: absolute;
        left: 237rpx;
        top: 113rpx;
      }

      .pos_54 {
        position: absolute;
        right: 239rpx;
        top: 113rpx;
      }

      .pos_55 {
        position: absolute;
        right: 101rpx;
        top: 113rpx;
      }

      .pos_56 {
        position: absolute;
        right: 0;
        top: 113rpx;
      }

      .pos_57 {
        position: absolute;
        left: 0;
        top: 169rpx;
      }

      .pos_58 {
        position: absolute;
        left: 138rpx;
        bottom: 0;
      }

      .pos_59 {
        position: absolute;
        left: 237rpx;
        top: 169rpx;
      }

      .pos_60 {
        position: absolute;
        right: 239rpx;
        top: 169rpx;
      }

      .pos_61 {
        position: absolute;
        right: 101rpx;
        top: 169rpx;
      }

      .pos_62 {
        position: absolute;
        right: 0;
        top: 169rpx;
      }
    }

    .font_2 {
      font-size: 24rpx;
      font-family: PingFangSC;
      line-height: 23rpx;
      color: #000000;
    }

    .text-wrapper_8 {
      padding: 14rpx 0 19rpx;
      background-color: #ffffff;
      width: 139rpx;
      height: 58rpx;
      border-left: solid 1rpx #eeeeee;
      border-right: solid 1rpx #eeeeee;
      border-top: solid 1rpx #eeeeee;
      border-bottom: solid 1rpx #eeeeee;
    }

    .text-wrapper_7 {
      padding: 14rpx 0 19rpx;
      background-color: #ffffff;
      width: 139rpx;
      border-left: solid 1rpx #eeeeee;
      border-right: solid 1rpx #eeeeee;
      border-top: solid 1rpx #eeeeee;
      border-bottom: solid 1rpx #eeeeee;
    }
  }

  .section_2_new {
    padding: 0 13rpx;
    background-color: #ffffff;
    border-radius: 10rpx 10rpx 0 0;

    .font {
      font-size: 24rpx;
      font-family: PingFangSC;
      line-height: 19rpx;
      color: #00140d;
    }

    .text_3 {
      margin-left: 10rpx;
    }

    .group {
      margin-top: 31rpx;
      padding: 0 10rpx;

      .font_2 {
        font-size: 24rpx;
        font-family: PingFangSC;
        line-height: 24rpx;
        color: #00140d;
      }
    }

    .group_2 {
      .group_3 {
        padding-bottom: 2rpx;
        overflow: hidden;

        .col_1 {
          padding: 0 6rpx;
          background-color: #00806b;
          min-width: 146rpx;
          height: 58rpx;
          border-left: solid 1rpx #eeeeee;
          color: #fff;
          line-height: 57rpx;
          font-size: 24rpx;
        }

        .col_2 {
          background-color: #00806b;
          min-width: 140rpx;
          height: 58rpx;
          border: solid 1rpx #eeeeee;
          color: #fff;
          line-height: 57rpx;
          font-size: 24rpx;
        }

        .col_3 {
          background-color: #ffffff;
          width: 70rpx;
          height: 58rpx;
          border: solid 1rpx #eeeeee;
          color: #00140d;
          line-height: 57rpx;
          font-size: 24rpx;
        }

        .col_4 {
          background-color: #ffffff;
          min-width: 145rpx;
          height: 58rpx;
          border: solid 1rpx #eeeeee;
          color: #00140d;
          line-height: 57rpx;
          font-size: 24rpx;
        }

        .image {
          width: 68rpx;
          height: 58rpx;
        }

      }

      .text-wrapper_8 {
        padding: 17rpx 0 21rpx;
        background-color: #ffffff;
        width: 68rpx;
        height: 58rpx;
        border-left: solid 1rpx #eeeeee;
        border-right: solid 1rpx #eeeeee;
        border-top: solid 1rpx #eeeeee;
        border-bottom: solid 1rpx #eeeeee;

        .text_8 {
          line-height: 18rpx;
        }
      }

      .section_4 {
        background-color: #ffffff;
        width: 139rpx;
        height: 58rpx;
        border-left: solid 1rpx #eeeeee;
        border-right: solid 1rpx #eeeeee;
        border-top: solid 1rpx #eeeeee;
        border-bottom: solid 1rpx #eeeeee;
      }

      .section_5 {
        background-color: #00806b;
        width: 139rpx;
        height: 58rpx;
        border-left: solid 1rpx #eeeeee;
        border-right: solid 1rpx #eeeeee;
        border-top: solid 1rpx #eeeeee;
        border-bottom: solid 1rpx #eeeeee;
      }

      .section_6 {
        background-color: #ffffff;
        width: 68rpx;
        height: 58rpx;
        border-left: solid 1rpx #eeeeee;
        border-right: solid 1rpx #eeeeee;
        border-top: solid 1rpx #eeeeee;
        border-bottom: solid 1rpx #eeeeee;
      }

      .text-wrapper_5 {
        padding: 15rpx 0 18rpx;
        background-color: #ffffff;
        border-left: solid 1rpx #eeeeee;
        border-right: solid 1rpx #eeeeee;
        border-top: solid 1rpx #eeeeee;
        border-bottom: solid 1rpx #eeeeee;

        .text_5 {
          margin-left: 17rpx;
          margin-right: 6rpx;
          color: #011613;
        }

        .image_2 {
          width: 23rpx;
          height: 23rpx;
        }

        .text_9 {
          color: #00806b;
        }
      }

      .font_3 {
        font-size: 24rpx;
        font-family: PingFangSC;
        line-height: 23rpx;
        color: #ffffff;
      }
    }
  }
}
</style>